<template>
	<view @tap="emits('click')" class="ss-flex">
		<view style="box-sizing: border-box;" class="ss-flex ss-row-center" :style="{width:width + 'rpx',height:height + 'rpx',padding:padding,...boxStyle}">
			<view>{{ text }}</view>
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
import propsIm from "./props.js"
	 const props = defineProps({
		...propsIm,
		width:{
			type:String,
			default:''
		},
		height:{
			type:String,
			default:''
		},
		padding:{
			type:String,
			default:'0 8rpx'
		},
		radius:{
			type:String,
			default:'8rpx'
		},
		fontSize:{
			type:[String,Number],
			default:'24'
		},
		checked:{
			type:Boolean,
			default:false
		},
		nocheckedBg:{
			type:String,
			default:'#DDDDDD'
		},
		checkeColor:{
			type:String,
			default:'#fff'
		}
	})
	const emits = defineEmits(['click'])
	const boxStyle = computed(() => {
		if(props.plain) {
			return {
				border:`1rpx solid ${props.borderColor}`,
				borderRadius:props.radius,
				fontSize:props.fontSize + 'rpx',
				color:props.color
			}
		}
		return {
			backgroundColor:props.checked?props.bgColor:props.nocheckedBg,
			color:props.checked?props.checkeColor:props.color,
			borderRadius:props.radius,
			fontSize:props.fontSize + 'rpx',
		}
	})
</script>

<style>

</style>